<template>
  <div class="details-container">
    <ContactDetails
      v-bind:contact="record.contact"
      class="details-item"
    ></ContactDetails>
    <div v-if="record.insurance || record.vaccination" class="details-item">
      <InsuranceDetails v-bind:insurance="record.insurance"></InsuranceDetails>
      <VaccinationDetails
        v-bind:vaccination="record.vaccination"
      ></VaccinationDetails>
    </div>
    <div
      v-for="(current, index) in record.custom.keys"
      v-bind:key="index"
      class="details-item"
    >
      <h2>{{ current }} Details</h2>
      <p v-for="(kvpair, index) in record.custom[current]" v-bind:key="index">
        {{ kvpair.key }}: {{ kvpair.value }}
      </p>
    </div>
  </div>
</template>

<script>
import ContactDetails from "@/components/ContactDetails.vue";
import InsuranceDetails from "@/components/InsuranceDetails.vue";
import VaccinationDetails from "@/components/VaccinationDetails.vue";

export default {
  name: "RecordDetails",
  props: ["record"],
  components: {
    ContactDetails,
    InsuranceDetails,
    VaccinationDetails
  }
};
</script>

<style scoped>
.details-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #faffff;
}

.details-item {
  min-width: 300px;
  width: 30%;
  margin-bottom: 2%;
}
</style>
